import 'package:flutter/material.dart';
import 'package:flutter_pink_app/components/entrance_banner.dart';
import '../composables/common_appbar.dart';
import '../composables/common_input.dart';
import '../composables/theme_button.dart';
import '../composables/popup_dialog.dart';
import '../util.dart';
import '../business/regist.dart';

// 登陆页面
class BiliRegistPage extends StatefulWidget {
  @override
  _BiliRegistPageState createState() => _BiliRegistPageState();
}

class _BiliRegistPageState extends State<BiliRegistPage> {
  String _username = ''; // 用户名
  String _phone = ''; // 手机电话号码
  String _password = ''; // 密码
  String _repassword = ''; // 再次输入密码
  bool _passwordIsFoucs = false; // 密码是否获得焦点
  bool _repasswordIsFocus = false; // 重新输入密码是否获得焦点
  bool _isSubmitting = false; // 提交锁
  bool get _imageIsProtected =>
      _passwordIsFoucs == true || _repasswordIsFocus == true; // 图片是否保护
  bool get _buttonIsActive => judgeMultStrIsNotEmpty(
      <String>[_password, _username, _phone, _repassword]); // 按钮是否被激活

  // 提交按钮方法
  void _submit(BuildContext ctx) async {
    // 锁，防止多次提交
    if (_isSubmitting == true) {
      return;
    }
    _isSubmitting = true;
    String popBtnText = '确认';
    // 如果两次输入密码不相同则直接返回
    if (_password != _repassword) {
      popupDialog(ctx, content: '两次输入的密码不同，再检查一下吧~', buttonText: popBtnText);
      _isSubmitting = false; // 退出之前还原锁
      return;
    }
    // 远程请求注册
    final res = await registAccount(_username, _repassword);
    final isSuccess = res.statusCode == 200 ? false : true; // 判断注册是否成功
    String popContent = "";
    // 根据注册是否成功情况修改显示内容
    if (isSuccess) {
      popContent = '恭喜你！注册成功';
      popBtnText = 'Bilibili 干杯~';
    } else {
      popContent = res.message;
      popBtnText = "稍后再试";
    }
    _isSubmitting = false;// 解开锁
    popupDialog(ctx,
        content: popContent,
        buttonText: popBtnText,
        onPressed: isSuccess ? () => Navigator.pop(ctx) : null); // 注册成功直接跳出注册页
  }

  @override
  Widget build(BuildContext scaffoldContext) {
    return Scaffold(
      appBar: buildCommonAppbar(scaffoldContext,
          needBackButton: true),
      body: ListView(
        physics: const BouncingScrollPhysics(),
        children: <Widget>[
          EntranceBanner(_imageIsProtected),
          CommonInput(
            needAutoFocus: true,
            type: 'text',
            title: '用户名',
            placeholder: '请输入用户名',
            onChanged: (value) => setState(() => _username = value),
          ),
          CommonInput(
            type: 'number',
            title: '手机号',
            placeholder: '请输入手机号',
            onChanged: (value) => setState(() => _phone = value),
          ),
          CommonInput(
            type: 'password',
            title: '密码',
            placeholder: '请输入密码',
            onFocus: (value) => setState(() => _passwordIsFoucs = value),
            onChanged: (value) => setState(() => _password = value),
          ),
          CommonInput(
            type: 'password',
            title: '确认密码',
            placeholder: '再次输入密码',
            onFocus: (value) => setState(() => _repasswordIsFocus = value),
            onChanged: (value) => setState(() => _repassword = value),
          ),
          Padding(
            padding: const EdgeInsets.all(15.0),
            child: ThemeActiveButton(
              '注  册',
              isActive: _buttonIsActive,
              onPressed: () => _submit(scaffoldContext),
            ),
          )
        ],
      ),
    );
  }
}
